<template>
	<view class="page">
		<wd-navbar title="常见问题" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
		<view class="content_box">
			 <wd-tabs v-model="tab" swipeable animated :lineWidth="0" color="#FE3D64" custom-class="cus_tabs">
			    <wd-tab :title="item.title" v-for="item in qaList" :name="item.title">
			      <view class="content">
					  <wd-collapse v-model="item.check" accordion>
					    <wd-collapse-item v-for="child in item.childern" :title="child.title" :name="child.id.toString()">{{child.content}}</wd-collapse-item>
					  </wd-collapse>
				  </view>
			    </wd-tab>
			  </wd-tabs>
			  <wd-gap height="30rpx"></wd-gap>
			  <view class="d-flex-center">
				  <wd-text size="14px" text="如果以上方法没有解决您的问题,请"></wd-text>
				  <wd-text size="14px" color="#FE3D64" text="联系客服"></wd-text>
			  </view>
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { ref, onMounted } from 'vue';
const tab = ref(null)
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const handleClick = ()=> {
}
const qaList = ref([])
const initQaList = ()=> {
	uni.request({
		url: "/api/wallpaper/problem/list/tree"
	}).then(res=>{
		qaList.value = res.data.map(item=>{
			return {
				...item,
				check: null
			}
		})
		tab.value = res.data[0]?.title;
	})
}
onMounted(()=>{
	initQaList()
})
</script>

<style lang="scss" scoped>
:deep() {
	.nav {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}
	.cus_tabs {
		.wd-tabs__nav-item {
			flex: unset;
			padding: 0 20rpx;
		}
	}
}
.page {
	position: relative;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.content_box {
	padding: 40rpx;
}
</style>
